<template>
    <div id="map" style="height: 100%; width: 100%;display: flex;flex-direction: column;"></div>
</template>

<script>
    import mapboxgl from "mapbox-gl";
    import "mapbox-gl/dist/mapbox-gl.css";
    // import MapboxWorker from "worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker"; // Load worker code separately with worker-loader
    // mapboxgl.workerClass = MapboxWorker; // Wire up loaded worker to be used instead of the default
    import * as turf from "@turf/turf";
    import {GET_MAPBOX_MAP} from "../components/map/CreateMap";

    export default {
        name: "View",

        mounted() {
            this.Init();
        },

        data() {
        },

        methods: {
            Init() {
                mapboxgl.accessToken = 'pk.eyJ1IjoiemhhbmdmZWkzMTcwIiwiYSI6ImNtNnlnMmZpZTBnenYydm9pOHQ0MzF6Y2oifQ.7aFdSnD7Ilm3P7PhyTMWtw'; // 替换为你的Mapbox访问令牌

                var map = GET_MAPBOX_MAP();

                // 禁飞区数据（GeoJSON格式）
                var noFlyZones = {
                    "type": "FeatureCollection",
                    "features": [
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Polygon",
                                "coordinates": [[[120.97, 25.02], [120.99, 25.02], [120.99, 25.04], [120.97, 25.04], [120.97, 25.02]]]
                            },
                            "properties": {"name": "禁飞区1"}
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Polygon",
                                "coordinates": [[[121.01, 25.0], [121.03, 25.0], [121.03, 25.02], [121.01, 25.02], [121.01, 25.0]]]
                            },
                            "properties": {"name": "禁飞区2"}
                        }
                    ]
                };

            // 将GeoJSON数据添加到地图上，并设置样式
                map.on('load', function () {
                    map.addLayer({
                        'id': 'no-fly-zones', // 图层ID
                        'type': 'fill', // 图层类型，这里使用填充图层来显示多边形区域
                        'source': { // 数据源配置，这里使用自定义数据源（GeoJSON）
                            'type': 'geojson', // 数据类型为GeoJSON
                            'data': noFlyZones // GeoJSON数据对象
                        },
                        'paint': { // 图层样式配置
                            'fill-color': '#FF6961', // 多边形填充颜色（红色）
                            'fill-opacity': 0.5 // 多边形填充透明度（半透明）
                        }
                    });
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
